<template>
  <div>
    <!-- 搜索框组件 -->
    <van-search
      v-model="keyword"
      show-action
      :placeholder="defaultKeyword"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />
    <!-- 历史记录和热门搜索 -->
    <HistoryHot
      v-if="hotKeywordList.length != 0"
      v-show="blockShow == 1"
      :searchHistoryData="historyKeywordList"
      :searchHotData="hotKeywordList"
      :defaultKeyword="defaultKeyword"
      @gosearch="setValue"
    ></HistoryHot>

    <!-- 搜索提示列表 组件-->
    <SearchTip
      v-show="blockShow == 2"
      :searchTipsArr="searchTipsArr"
      @setValue="setValue"
    ></SearchTip>

    <!-- 下拉菜单组件 -->
    <MenuDown
      :goodList="goodList"
      v-show="blockShow == 3"
      :filterCategory="filterCategory"
      @changePrice="changePrice"
      @changeCategory="changeCategory"
      v-if="goodList.length != 0"
    ></MenuDown>

    <!-- <Product :goodList="goodList"></Product> -->
  </div>
</template>

<script>
//引入全部 价格 分类  下拉菜单
import MenuDown from "@/components/Search/MenuDown.vue";
//引入数据,历史记录和热门搜搜
import { GetSearchData, GetPopupData } from "@/https/http.js";
//引入历史记录组件
import HistoryHot from "@/components/Search/HistoryHot.vue";
//渲染数据
// import Product from '@/components/Search/Products.vue'
//搜索提示列表数据
import { GetSearchTipsListData } from "@/https/http.js";
import SearchTip from "@/components/Search/SearchTip.vue";
export default {
  name: "VueSearchpop",
  components: {
    MenuDown,
    // Product,
    HistoryHot,
    SearchTip,
  },

  data() {
    return {
      keyword: "",
      page: 1,
      size: 20,
      order: "desc", //降序
      categoryId: 0, //类别id  全部居家，餐厨...
      sort: "id",
      goodList: [], //商品列表
      filterCategory: [], //分类选项
      blockShow: 1,
      historyKeywordList: [],
      hotKeywordList: [],
      defaultKeyword: "",
      searchTipsArr: [],
    };
  },
  mounted() {
    this.getDataList();
    GetPopupData().then((res) => {
      //   console.log(res)
      let { defaultKeyword, historyKeywordList, hotKeywordList } =
        res.data.data;
      (this.historyKeywordList = historyKeywordList),
        (this.defaultKeyword = defaultKeyword.keyword),
        (this.hotKeywordList = hotKeywordList);
    });
  },

  methods: {
    onSearch() {
      this.getDataList();
    },
    onCancel() {
      this.$router.push("/home");
    },
    getDataList() {
      // 获取商品数据列表封装

      let paramsobj = {
        keyword: this.keyword,
        page: this.page,
        size: this.size,
        order: this.order,
        categoryId: this.categoryId,
        sort: this.sort,
      };
      GetSearchData(paramsobj).then((res) => {
        console.log(res);
        (this.goodList = res.data.data.goodsList),
          (this.filterCategory = res.data.data.filterCategory),
          (this.filterCategory = JSON.stringify(this.filterCategory)
            .replace(/name/g, "text")
            .replace(/id/g, "value")),
          (this.filterCategory = JSON.parse(this.filterCategory));
      });
    },
    changePrice(m) {
      //价格排序
      (this.order = m), (this.sort = "price");
      this.getDataList();
    },
    changeCategory(n) {
      (this.categoryId = n), (this.sort = "id");
      this.getDataList();
    },
    // getVal(m){
    //     console.log(m)
    //     this.key=m,
    //     this.onSearch()
    // },
    onInput(val) {
      (this.blockShow = 2),
        GetSearchTipsListData({ keyword: val }).then((res) => {
          console.log(res);
          this.searchTipsArr = res.data;
        });
    },
    setValue(m) {
      console.log(m);
      (this.keyword = m), this.onSearch();
      this.blockShow = 3;
    },
  },
};
</script>

<style lang="less" scoped></style>
